<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small" class="mb-20"><i class="el-icon-back"></i>返回列表
      </el-button>
      <div class="tips-schedule mb-20">
        <p>
          <span></span>
          自主日程;
        </p>
        <p>
          <span></span>
          被授日程;
        </p>
        <p class="top-line">
          <i class="iconfont iconjinggao"></i>
          待确认日程;
        </p>
        <p class="back-line-none">
          <span></span>
          驳回日程;
        </p>
        <p>右击时间段添加自主日程；</p>
      </div>
      <div class="getUser-line mb-10">
        <span>接受人：</span>{{ routeOption.user_name }}
      </div>
      <div class="table-body-task">
        <h2><small>{{ Weekdate }} {{ weekName }} {{ Weektime }}</small>日程安排 </h2>
        <!--        本周-->
        <div v-for="(item ,index) in myOptionData">
          <div class="table-body-title">
            <div class="table-body-title-line">
              {{ item[0].year }}学年/{{ item[0].teach_week }}周
              <!--              ({{ index == 0 ? '本周' : '下周' }})-->
            </div>
            <div class="table-body-title-line-time">
              <div class="table-body-title-line-time-line" v-for="time in timeList">
                {{ time.start_time }} - {{ time.end_time }}
              </div>
            </div>
          </div>
          <div class="table-body-title-list">
            <div class="table-list" v-for="(weekDay,dayIndex) in item" :class="!weekDay.daystatus?'notEditLine':''">
              <div class="table-list-box-time">
                {{ weekDay.day }}
              </div>
              <div class="table-list-box-week">
                {{ week[weekDay.week] }}
                <span class="today-box" v-if="weekDay.day==Weekdate">今</span>
              </div>
              <div class="table-list-box-task"
                   :class="[times.id==mouseHover?'hoverBox':'',!times.dayTimeStatus?'notEditLine':'']"
                   v-for="(times,timeIndex) in weekDay.schedule" @mouseover="changeActive($event,times)"
                   @mouseout="removeActive" @contextmenu.prevent="openMenu($event,index,dayIndex,timeIndex)">
                <!--                                事件提醒模块-->
                <!--                <el-popover-->
                <!--                    placement="top"-->
                <!--                    width="200"-->
                <!--                    trigger="hover"-->
                <!--                    v-model="timeTask.visible"-->
                <!--                    v-for="(timeTask,timeTaskIndex) in weekDay.schedule[timeIndex].list">-->
                <!--                  &lt;!&ndash;                  timeTask.type==1 别人授权来的 0 我的&ndash;&gt;-->
                <!--                  <div v-if="timeTask.type==1" class="taskProBox">-->
                <!--                    <p><span>授出人:</span>{{ timeTask.inviter.realname }}</p>-->
                <!--                    <p><span>详情:</span>{{ timeTask.title }}</p>-->
                <!--                    <p v-if="timeTask.remind"><span>提醒:</span>{{ timeTask.remind }}</p>-->
                <!--                    <p class="taskProBox-stauts">-->
                <!--                      <span>状态:</span>-->
                <!--                      <span>{{ timeTask.status == 0 ? '未处理' : timeTask.status == 1 ? '已接受' : '已驳回' }}</span>-->
                <!--                      <em v-if="timeTask.status==0&& !weekDay.daystatus">（已过期）</em>-->
                <!--                    </p>-->
                <!--                  </div>-->
                <!--                  <div v-else class="taskProBox">-->
                <!--                    <p><span>详情:</span>{{ timeTask.title }}</p>-->
                <!--                    <p v-if="timeTask.remind"><span>提醒:</span>{{ timeTask.remind }}</p>-->
                <!--                  </div>-->
                <!--                  <div slot="reference" class="table-list-box-task-detail my-task" v-if="timeTask.type==0">-->
                <!--                    <p class="detail-title-box">{{ timeTask.title }}</p>-->
                <!--                  </div>-->
                <!--                  <div slot="reference" v-if="timeTask.type==1">-->
                <!--                    &lt;!&ndash;                    0 待审核 1 通过 2 驳回 &ndash;&gt;-->
                <!--                    <div class="table-list-box-task-detail dufultTitle" v-if="timeTask.status==0">-->
                <!--                      <p class="detail-title-box"><i class="iconfont iconjinggao"></i>{{ timeTask.title }}</p>-->
                <!--                    </div>-->
                <!--                    <div class="table-list-box-task-detail order-task" v-if="timeTask.status==1">-->
                <!--                      <p class="detail-title-box">{{ timeTask.title }}</p>-->
                <!--                    </div>-->
                <!--                    <div class="table-list-box-task-detail dufultTitle detelTitle" v-if="timeTask.status==2">-->
                <!--                      <p class="detail-title-box">{{ timeTask.title }}</p>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </el-popover>-->
                <div v-for="(timeTask,timeTaskIndex) in weekDay.schedule[timeIndex].list">
                  <div class="table-list-box-task-detail my-task" v-if="timeTask.type==0">
                    <p class="detail-title-box">{{ timeTask.title }}</p>
                  </div>
                  <div v-if="timeTask.type==1">
                    <!--                    0 待审核 1 通过 2 驳回 -->
                    <div class="table-list-box-task-detail dufultTitle" v-if="timeTask.status==0">
                      <p class="detail-title-box"><i class="iconfont iconjinggao"></i>{{ timeTask.title }}</p>
                    </div>
                    <div class="table-list-box-task-detail order-task" v-if="timeTask.status==1">
                      <p class="detail-title-box">{{ timeTask.title }}</p>
                    </div>
                    <div class="table-list-box-task-detail dufultTitle detelTitle" v-if="timeTask.status==2">
                      <p class="detail-title-box">{{ timeTask.title }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul class='contextmenu' v-show="visibleFn" :style="{left:left+'px',top:top+'px'}">
      <li @click="addMySchedule">新增授出日程</li>
    </ul>
    <addDayTime :visible.sync="MySchedule.visible" :optionData="MySchedule.optionData" @checkInit="InitFn"></addDayTime>
  </div>
</template>

<script>
import addDayTime from '@/components/dialog/addDayTime'

export default {
  components: {
    addDayTime
  },
  data () {
    return {
      timeList: [], // 时间段列表
      Weekdate: '--',
      Weektime: '--',
      weekName: '--',
      week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      visibleFn: false, // 右键
      top: 0,
      left: 0,
      myOptionData: [],
      mouseHover: '',
      routeOption: {},
      MySchedule: {
        visible: false, // 弹窗状态
        optionData: ''
      }
    }
  },
  watch: {
    visibleFn (value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  created () {
    this.routeOption = JSON.parse(this.$route.query.optionData)
    this.timerID = setInterval(() => {
      this.updateTime()
    }, 1000)
    // 获取页面数据
    this.InitFn()
  },
  methods: {
    InitFn () {
      this.$fetch(this.api.schedule.scheduleTeacher, {user_id: this.routeOption.user_id}).then((response) => {
        let dayList = []
        let week = []
        for (let i in response.list) {
          let cd = new Date()
          let oDate1 = new Date(this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2))
          let oDate2 = new Date(response.list[i].day)
          if (oDate1.getTime() > oDate2.getTime()) {
            response.list[i].daystatus = false // 日程可否编辑
          } else {
            response.list[i].daystatus = true
          }

          for (let n in response.list[i].schedule) {
            if (response.list[i].schedule[n].list.length) {
              for (let m in response.list[i].schedule[n].list) {
                response.list[i].schedule[n].list[m].visible = false
              }
            }

            // 判断的是天 还需要判断小时 schedule是否可以操作
            let timeOption_ = response.list[i].day
            let startime = timeOption_.replace('/-/g', '/') + ' ' + response.list[i].schedule[n].start_time// 时间转换
            let endtime = timeOption_.replace('/-/g', '/') + ' ' + response.list[i].schedule[n].end_time// 时间转换
            // //时间
            let date1 = new Date(startime)
            let date3 = new Date(endtime)
            // //现在时间
            let date2 = new Date()
            // //判断时间是否过期
            if (oDate1.getTime() <= oDate2.getTime()) {
              // 判断他的时间段是否比开始时间大比结束时间小
              if (date1 < date2) {
                // 开始时间小于现在
                response.list[i].schedule[n].dayTimeStatus = false
              } else {
                response.list[i].schedule[n].dayTimeStatus = true
              }
            }
          }
          if (Number(i) === 0) {
            this.timeList = response.list[i].schedule
          }
          dayList.push(response.list[i])
          if (Number(response.list[i].week) === 0) {
            week.push(dayList)
            dayList = []
          }
        }
        this.myOptionData = week
      }).catch((err) => {
        console.log(err)
      })
    },
    updateTime () {
      let cd = new Date()
      this.Weektime = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2)
      this.Weekdate = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2)
      this.weekName = this.week[cd.getDay()]
    },
    zeroPadding (num, digit) {
      let zero = ''
      for (let i = 0; i < digit; i++) {
        zero += '0'
      }
      return (zero + num).slice(-digit)
    },
    addMySchedule () {
      this.MySchedule.visible = true
    },
    // 右键关闭
    openMenu (e, weekindex, dayIndex, timeIndex) {
      if (this.myOptionData[weekindex][dayIndex].schedule[timeIndex].dayTimeStatus) {
        this.left = e.clientX
        this.top = e.clientY
        let dataOption = {
          day: this.myOptionData[weekindex][dayIndex].day,
          time: this.myOptionData[weekindex][dayIndex].schedule[timeIndex],
          dayName: this.week[this.myOptionData[weekindex][dayIndex].week],
          userOption: this.routeOption
        }
        this.MySchedule.optionData = JSON.stringify(dataOption)
        this.visibleFn = true
      } else {
        this.$message.error('时间已过不可添加')
      }
    },
    closeMenu () {
      this.MySchedule.optionData = ''
      this.visibleFn = false
    },
    HistoryList (option) {
      this.historyBox.type = option
      this.historyBox.visible = true
    },
    changeActive (even, time) {
      this.mouseHover = time.id
    },
    removeActive () {
      this.mouseHover = ''
    },
    backlist () {
      this.$router.go(-1)
    }
  },
  mounted () {
  }
}
</script>
